<template>
    <div class="index-container">
        <!-- 导航栏 -->
        <indexNavBar
            :title="$route.meta.title"
            :back="false"
            @click-left="$router.go(-1)"
        ></indexNavBar>

        <!-- 订单列表 -->
        <div class="order-tabs">
            <div class="order-tabs-list" :class="{'order-tabs-active':active=='first'}" @click="handleTabs('first', '')">全部</div>
            <div class="order-tabs-list" :class="{'order-tabs-active':active=='second'}" @click="handleTabs('second', '2')">待支付</div>
            <div class="order-tabs-list" :class="{'order-tabs-active':active=='third'}" @click="handleTabs('third', '3')">已支付</div>
            <div class="order-tabs-list" :class="{'order-tabs-active':active=='fourth'}" @click="handleTabs('fourth', '64')">已关闭</div>
            <div class="order-tabs-list" :class="{'order-tabs-active':active=='fifth'}" @click="handleTabs('fifth', '1')">计量中</div>
        </div>

        <!-- 下拉刷新 && 上拉加载 -->
        <pullList
            class="order-content"
            ref="pullList"
            :finishedText="finishedText"
            @refresh="handleRefresh"
            @load="init"
        >
            <indexListNone v-if="list.length == 0" />

            <template v-for="(item, index) in list">
                <orderCard
                    :key="index"
                    :class="{'index-card-last': index + 1 == list.length}"
                    :cardInfo="item"
                ></orderCard>
            </template>
        </pullList>
    </div>
</template>

<script>
import pullList from '../../components/pull-list/pull-list.vue'
import indexNavBar from '../../components/style/index-nav-bar.vue'
import indexListNone from '../../components/style/index-list-none.vue'
import orderCard from './components/order-card.vue'

export default {
    components: {
        pullList,
        indexNavBar,
        indexListNone,
        orderCard
    },
    data () {
        return {
            active: 'first',
            finishedText: '没有更多了',
            loading: false,
            queryParameter: {
                corpNo: this.$C.corpNo,
                pageSize: 10,
                pageNum: 0
            },
            list: []
        }
    },
    mounted () {

    },
    methods: {
        /* 初始化 */
        init () {
            setTimeout(() => { this.initList() }, 50)
        },

        /* 下拉刷新 */
        handleRefresh () {
            this.queryParameter.pageNum = 0
            this.$refs.pullList.finished = false
            this.initList()
        },

        /* 初始化接口 */
        initList () {
            if (this.loading) {
                return
            }

            let _this = this
            this.loading = true

            this.$H.get(_this, _this.$A.orderRecord.page, _this.queryParameter)
                .then(res => {
                    // 数据异常
                    if (res.status != 200) {
                        return
                    }
                    let rows = res.data ? res.data.content : []
                    // 加载结束
                    if (rows == null || rows.length == 0) {
                        _this.$refs.pullList.finished = true
                    }
                    // 最后一页
                    if (rows.length < _this.queryParameter.pageSize) {
                        _this.$refs.pullList.finished = true
                    }
                    // 数据处理
                    if (_this.queryParameter.pageNum === 0) {
                        _this.list = rows
                        if (rows.length === 0) {
                            _this.finishedText = ''
                        }
                    } else {
                        _this.list = _this.list.concat(rows)
                    }
                    _this.queryParameter.pageNum++
                    _this.loading = false
                    _this.$refs.pullList.loading = false
                    _this.$refs.pullList.refreshing = false
                })
                .catch(err => {
                    console.log(err)
                })
        },

        /* 切换tab标签页 */
        handleTabs (index, val) {
            this.active = index
            this.list = []
            this.finishedText = '没有更多了'
            this.queryParameter.orderStatus = val
            this.queryParameter.pageNum = 0
            this.$refs.pullList.finished = false
            // this.handleRefresh()
            this.initList()
        }
    }
}
</script>

<style lang="less" scoped>
.order-tabs {
    width: calc(100% - 20px);
    margin: 24px 10px 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .order-tabs-list {
        height: 29px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(45,55,72,.4);
    }
    .order-tabs-active {
        color: #2D3748;
        &::after {
            content: '';
            display: block;
            width: 6px;
            height: 6px;
            margin: 3px auto 0;
            border-radius: 50%;
            background: linear-gradient(136deg,#6BBFFC 6%, #00D5E3 90%);
        }
    }
}
.order-content {
    height: calc(100% - 222px);
}
</style>
